Hey folks, I’m trying to switch from using Angular via CDN to npm, but I’m running into some issues. Here’s what I’ve done:
- Removed the CDN script tag
- Installed Angular with npm
- Updated the script tag to point to node_modules
Now I’m getting a syntax error when loading the app. It says ‘Unexpected token <’ in angular.js. Any ideas on how to fix this?
Here’s a simplified version of my setup:
// Server-side
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
// Client-side (index.html)
<script src='/node_modules/angular/angular.min.js'></script>
<script src='/app.js'></script>
I’m hoping to use Browserify or something similar to bundle everything together. Any help would be appreciated!
It appears that you are on the right track, but extra configuration steps are necessary to ensure Angular works correctly when installed via npm. Rather than linking directly to the file in node_modules with a script tag, you should use a module bundler such as Webpack or Browserify. By importing Angular into your main JavaScript file, the bundler will compile all dependencies into a consolidated file that your browser can process correctly. Although the initial setup may be a bit more involved, it ultimately provides a more maintainable and robust development environment.
I’ve been in a similar situation, and the main issue turned out to be how the browser handles the Angular file. When you link directly from the node_modules folder, the server might serve the file incorrectly—often as HTML rather than JavaScript. Setting up a bundler like Webpack or Rollup helps resolve this by letting you import Angular directly in your code, for example, using an import statement. Once bundled into one file, your app enjoys better dependency management and can avoid these syntax errors.
yo, i had the same problem last week. try using webpack, it’s pretty good for bundling stuff.
just npm install webpack and create a config file. then import angular in ur main js file like ‘import angular from ‘angular’;’. it’ll package everything up nice and neat. good luck!