Angular 2 npm start 报错

最新推荐文章于 2025-05-21 08:06:27 发布

转载最新推荐文章于 2025-05-21 08:06:27 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/haimingpro/p/6073929.html

文章标签：

#javascript #ViewUI

本文详细解析了Angular应用启动过程中常见的问题，特别是关于文件路径配置、模块引导设置等导致的404错误及缺失@NgModule.bootstrap组件的问题，并给出了具体的解决办法。

首先, index.html 和styles.css是和app目录平级的, 不要扔到里面去, 否则会404

确认配置文件齐全, 路径都正确之后 npm start

What?! 照着快速起步也会弄错吗? 人品问题吗?

很多人可能会看到npm报错:

$ npm start

> angular-quickstart@1.0.0 start F:\work\angular_quickstart\angular
> tsc && concurrently "tsc -w" "lite-server"

[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[0] 14:36:11 - Compilation complete. Watching for file changes.
[1] [BS] Access URLs:
[1]  --------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://192.168.155.1:3000
[1]  --------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://192.168.155.1:3001
[1]  --------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.11.17 14:36:15 404 GET /index.html
[1] 16.11.17 14:36:15 404 GET /favicon.ico

除了404是上面说的文件摆放路径错误意外, 其实不需要care它的, 和正常启动应用无关, 属于npm版本相关问题, 此处不赘述。

重要的是console里面的log：

The module AppModule was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. Please define one of these.

这句还是make sense的, 意思是

初始化的时候用的platform.bootstrapModule(), 却没有把bootstrap引用为[ AppComponent ]

问题就出在这里

这里是应用的入口点。

由于 QuickStart 是运行在浏览器中的 Web 应用，所以根模块需要从 @angular/platform-browser 中导入 BrowserModule 并添加到 imports 数组中。

这是要让最小的应用在浏览器中运行时，对 Angular 的最低需求。

QuickStart 应用不做别的，也就先不需要其它模块。在真实的应用中，我们可能还得导入 FormsModule 、 RouterModule 和 HttpModule 。这些会在英雄指南教程中引入。