[英]How to convert Angular 6 project to PWA application
My project is already running using Angular 6, I need to integrate PWA to my existing application. 我的项目已经在使用Angular 6运行,我需要将PWA集成到我现有的应用程序中。 When I add
当我添加
ng add @angular/pwa
Output: + @angular/pwa@0.13.8
输出:+
@angular/pwa@0.13.8
Only 1 file added in place of 6-7 files modify. 仅添加1个文件代替6-7个文件进行修改。 If I create a new project and then do above command
"ng add @angular/pwa"
pwa works fine. 如果我创建一个新项目然后执行上面命令
"ng add @angular/pwa"
pwa工作正常。
Anyone can find where I am doing mistake. 任何人都可以找到我在做错的地方。
To integrate PWA into your project you need to follow these step: 要将PWA集成到项目中,您需要执行以下步骤:
Install these 2 package 安装这两个包
"@angular/pwa": "0.12",
"@angular/service-worker": "^7.2.12"
In angular.json file add serviceWorker config like this 在angular.json文件中添加serviceWorker配置
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true
}
}
Create ngsw-config.json in the same level of angular.json like this 像这样在angular.json的相同级别创建ngsw-config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/assets/favicon.ico",
"/*.css",
"/*.js"
],
"urls": [
"https://cdnjs.cloudflare.com/**"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
And finally in your app.module.ts add in imports section 最后在你的app.module.ts中添加导入部分
ServiceWorkerModule.register("ngsw-worker.js", { enabled: environment.production })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.