标签: angular5

我有一个Angular 5 App.

这就是我在package.json中的内容

{
  "name": "web",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.1.0",
    "@angular/cli": "^1.6.4",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@angular/router": "5.0.3",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "@ngx-translate/core": "8.0.0",
    "@types/jquery": "3.2.16",
    "angular2-image-upload": "^1.0.0-rc.0",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "2.4.1",
    "express": "^4.16.2",
    "jquery": "3.2.1",
    "jquery-slimscroll": …

我在服务工作者中使用了sw预先缓存.我只缓存了服务工作者中的浏览器文件夹.所以服务器端渲染不能在服务工作者中工作任何人请帮助我解决这个问题.如果ssr工作服务工作者不工作,反之亦然

下面是我的sw precache config.json

module.exports = {
navigateFallback: '/index.html',
stripPrefix: 'dist/browser',
root: 'dist/browser',
staticFileGlobs: [

'dist/browser/index.html',
'dist/browser/**.js',
'dist/browser/**.css',
'dist/browser/**.ico',
'dist/browser/assets/images/**.jpg',
'dist/browser/assets/images/**.png',
'dist/browser/assets/images/**.gif',
'dist/browser/assets/js/**/**.js',
'dist/browser/assets/js/**.js',
'dist/browser/assets/css/**.css'


 ],

runtimeCaching: [{
urlPattern: /^https:\/\/tg\.s3\.rfyfg\.com\//,
handler: 'cacheFirst'
}]
};

谢谢

我想知道如何新的角度2服务装饰

@Injectable({
    providedIn: 'root'
})

与延迟加载一起工作.这意味着如果我有一个延迟加载的模块,并且提供了一个在root中提供的服务,那么这将包括应用程序基本代码中的特定服务.应用程序root chunks.js或者这仍然会延迟加载服务,然后在我懒加载该模块时使其成为全局单例.

有关提供的信息

https://angular.io/guide/ngmodule-faq

我正在尝试设置2个字段值<input matInput>abnd <mat-select>编程.对于文本输入,一切都按预期工作,但是对于<mat-select>视图,这个字段就像它有价值一样null.但是,如果我打电话,console.log(productForm.controls['category'].value它会打印出我以编程方式设置的正确值.我错过了什么吗？

这是代码:

表单配置:

productForm = new FormGroup({
        name: new FormControl('', [
            Validators.required
        ]),
        category: new FormControl('', [
            Validators.required
        ]),
    });

设定值:

ngOnInit() {
        this.productForm.controls['name'].setValue(this.product.name);
        this.productForm.controls['category'].setValue(this.product.category);
    }
}

HTML:

<mat-form-field>
    <mat-select [formControlName]="'category'"
                [errorStateMatcher]="errorStateMatcher">
        <mat-option *ngFor="let category of categories" [value]="category">
            {{category.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

我尝试使用标准ng build --prod命令构建一个Angular 5应用程序,并且我想将基本API-Url设置为environment.prod.ts依赖于我的process.env变量的值.

这是我的档案:

export const environment = {
    production: true,
    apiUrl: `${process.env.BASE_URL}` || 'http://localhost:8070/',
};

但是当我尝试构建应用程序时,会发生以下错误:

ERROR in src/environments/environment.ts(7,16): error TS2304: Cannot find name 'process'.

在构建应用程序时,如何根据env变量设置API-Url？

在AngularJS中,我们可以使用$watch,$digest... 来监听变量更改,这对于新版本的Angular(5,6)是不可能的.

在Angular中,此行为现在是组件生命周期的一部分.

我检查了官方文档,文章,尤其是关于可变对象的Angular 5变化检测,以了解如何在TypeScript类/Angular中监听变量(类属性)更改

今天提出的建议是:

import { OnChanges, SimpleChanges, DoCheck } from '@angular/core';


@Component({
  selector: 'my-comp',
  templateUrl: 'my-comp.html',
  styleUrls: ['my-comp.css'],
  inputs:['input1', 'input2']
})
export class MyClass implements OnChanges, DoCheck, OnInit{

  //I can track changes for this properties
  @Input() input1:string;
  @Input() input2:string;
  
  //Properties what I want to track !
  myProperty_1: boolean
  myProperty_2: ['A', 'B', 'C'];
  myProperty_3: MysObject;

  constructor() { }

  ngOnInit() { }

  //Solution 1 - fired when Angular detects …

我创建了一个新项目,我正在尝试添加angular-material.

我material.module.ts在我的app文件夹中创建:

import { NgModule } from '@angular/core';

import {
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule,
    ],
    exports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule
    ]
})
export class MaterialModule { }

我已将其导入我的一个组件中:

import { MaterialModule } from '../material.module';

此外,我已经设置了角度材料 index.html

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

在我的 style.css

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

我知道这是有效的,因为我已经展示了material-icon一个测试:

<i class="material-icons">face</i> …

我在这些版本中使用angular 5和ng-bootstrap:

  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^2.1.0",
    "angular-in-memory-web-api": "^0.5.4",
    "angular2-moment": "^1.9.0",
    "bootstrap": "^4.1.1",
    "core-js": "^2.4.1",
    "date-util": "^1.2.1",
    "material-icons": "^0.2.1",
    "ngx-bootstrap": "^3.0.0",
    "normalize.css": "^8.0.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },

当我得到服务有这个错误:

**

编译失败.

node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts(58,96):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-input.d.ts(121,67):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(115,208):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(12,45):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(29,45):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(37,44):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/modal/modal-window.d.ts(13,40):错误TS2315:类型'ElementRef'不是通用的.

我正在我的backbase应用程序中运行多个小角度5应用程序作为小部件.现在我正在尝试编写一个窗口级别的全局服务,并在所有应用程序中共享.

目前,我正在使服务静态并在每个小部件中使用并使用webpack创建特定于小部件的包.在这里,我能够使用rxjs运算符实现http缓存.

但我觉得这可能不是实施它的正确方法.有没有更好的方法在单个项目中跨多个角度5应用程序共享单件服务.

我当前的网址是http:// localhost:4200/test/dashboard.

我想使用angular 5功能打印基本网址,即http:// localhost:4200.