首先, 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
。這些會在 英雄指南教程 中引入。
官方文檔上給的最低需求,低到連它自己給出的index.html都顯示不出來了...
我老眼昏花只用了最低配置, 而沒有看到就在下面幾行它其實又貼了一次這個文件:
這才是 要用的!
You see, 改完這個文件以后應該就不會報錯了, 最后的console應該變成這樣: