【初始angular 】angular項目創建過程中需要注意的細節
安裝angular-cli工具
yarn global add @angular/cli
當前使用版本:Angular CLI: 7.3.1如果是一些企業級項目的話,本人推薦使用的版本比最新版小一個主版本號,防止最新版的一些發現的問題
設置包管理工具爲yarn
ng config cli.packageManager yarn -g
設置cli的包管理工具,這一步可有可無,你也可以用默認的npm
創建項目
ng new ng-project
ng 命令介紹 angular-cli
有兩個選項,根據需求選擇,以下是當前操作
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? Sass [ http://sass-lang.com ]
熱更新
- 添加@angularclass/hmr包
yarn add @angularclass/hmr --dev
-
創建src/hmr.ts文件
import { NgModuleRef, ApplicationRef } from '@angular/core'; import { createNewHosts } from '@angularclass/hmr'; export const hmrBootstrap = ( module: any, bootstrap: () => Promise<NgModuleRef<any>> ) => { let ngModule: NgModuleRef<any>; module.hot.accept(); bootstrap().then(mod => (ngModule = mod)); module.hot.dispose(() => { const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef); const elements = appRef.components.map(c => c.location.nativeElement); const makeVisible = createNewHosts(elements); ngModule.destroy(); makeVisible(); }); };
-
修改src/main.ts
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; import { hmrBootstrap } from './hmr'; declare var module: any; if (environment.production) { enableProdMode(); } const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule); if ((environment as any).hmr) { if (module.hot) { hmrBootstrap(module, bootstrap); } else { console.error('HMR is not enabled for webpack-dev-job!'); console.log('Are you using the --hmr flag for ng serve?'); } } else { document.addEventListener('DOMContentLoaded', () => { bootstrap().catch(err => console.log(err)); }); }
-
創建src/environments/environment.hmr.ts
export const environment = { production: false, hmr: true };
-
修改angular.json文件
在angular.json的對象
projects.architect.build.configurations
添加以下內容"hmr": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.hmr.ts" } ] }
在angular.json的對象
projects.architect.serve.configurations
添加以下內容"hmr": { "browserTarget": "ng-project:build:hmr", "hmr": true }
-
添加熱更新啓動命令行
在package.json的scripts中添加以下內容
"start:hmr": "ng serve -c hmr"
多項目支持
ng generate application ng-project2
這個命令會在根目錄下生產一個projects文件夾,所有生成的項目都在這個文件夾下
通過npm模塊的方式引用外部依賴
比如ng-project項目和ng-project2需要共用api接口,我們想在在項目中以 @apis/user、@apis/permissions這樣的方式使用api接口,兩步:
- 創建apis類庫
ng generate library apis
-
在tsconfig.json中compilerOptions下添加
"paths": { "@apis/*": [ "dist/apis/*" ] }
服務端渲染
ng add @nguniversal/express-engine --clientProject ng-project --appId ng-project-universal
-
yarn add mutation-observer
// 有些庫需要比如:ng-zorro-antd -
替換 server.ts
import 'zone.js/dist/zone-node'; import 'reflect-metadata'; import { enableProdMode } from '@angular/core'; // Express Engine import { ngExpressEngine } from '@nguniversal/express-engine'; // Import module map for lazy loading import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader'; import * as express from 'express'; import { join } from 'path'; const domino = require('domino'); const fs = require('fs'); const template = fs.readFileSync(join(process.cwd(), 'dist/browser/index.html')).toString(); const win = domino.createWindow(template); global['window'] = win; global['MutationObserver'] = require('mutation-observer'); Object.defineProperty(win.document.body.style, 'transform', { value: () => { return { enumerable: true, configurable: true }; }, }); global['document'] = win.document; global['CSS'] = null; // Faster server renders w/ Prod mode (dev mode never needed) enableProdMode(); // Express server const app = express(); const PORT = process.env.PORT || 4000; const DIST_FOLDER = join(process.cwd(), 'dist/browser'); // * NOTE :: leave this as require() since this file is built Dynamically from webpack const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main'); // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine) app.engine('html', ngExpressEngine({ bootstrap: AppServerModuleNgFactory, providers: [ provideModuleMap(LAZY_MODULE_MAP) ] })); app.set('view engine', 'html'); app.set('views', DIST_FOLDER); // Example Express Rest API endpoints // app.get('/api/**', (req, res) => { }); // Server static files from /browser app.get('*.*', express.static(DIST_FOLDER, { maxAge: '1y' })); // All regular routes use the Universal engine app.get('*', (req, res) => { global['navigator'] = req['headers']['user-agent']; res.render('index', {req}); }); // Start up the Node server app.listen(PORT, () => { console.log(`Node Express server listening on http://localhost:${PORT}`); });
- 構建
yarn build:ssr
- 編譯
yarn compile:server
- 運行
serve:ssr
通過命令生產的 server.ts 不能解決一些瀏覽器報錯的問題,以上的server.ts已經把大部分問題包含了
提供參考項目源碼 https://github.com/loopbless/btf-factoring-manager
至此,一個逼格較高的項目就建好了!
有問題歡迎進羣討論!