You're probably using the <router-outlet> within the form component. Place the form in a separate component without the <router-outlet>.Leave it <router-outlet> only for AppComponente or a template component. As your other page is already component, it is expected that the structure of your project will be like this:app.component.ts |- formulario |-formulario.component.ts |-formulario.component.html |-outra-pagina |-outra-pagina.component.ts |-outra-pagina.component.html

Try it this wayng g component minha-pasta/component --flat The flat parameter serves to generate the files without creating a new folder

The solution to the problem described above is found on this site: https://mereommig.dk/en/blog/adding-livereload-to-the-angular-cli-libraries . In this site describes the step by step how to transform a functional library into angular 6 with angular-cli. 1 - create a project with ng new .2 - use the command ng generate library .3 - import your project files to projects//lib folder4 - Change the name of the public_api.ts file to index. ts.5 - Inside the ng-pakage file. json exchange the name public_api to index.6 - In the tsconfig.json file, modify within path -> add the /src path.7 - Rotate the library with the ng build command.If everything is set up correctly, a bibteca will be generated within dist. This can be imported into other projects.

I have the same message.Your global Angular CLI version (6.0.8) is greater than your local version (1.7.3). The local Angular CLI version is used.To disable this warning use "ng config -g cli.warnings.version Mismatch false".That's not an error message. This is a warning only warning that you are with a different version of the CLI on the project and the installed on your machine.You can check this in your package file. json. You must have a line like this below only with version 1.5.0 as informed in your warning."@angular/cli": "~1.7.3" You can hide this message or resolve it.Search for updating angular design, this https://update.angular.io/ can help you.Loiane posted on it in https://loiane.com/2018/05/upgrading-to-angular-v6/ her a little.I hope it helps.

Update to the next version of the CLI angle npm uninstall -g @angular/cli npm cache verify npm install -g @angular/cli@next and recreate the project with ng new project , since it seems an error in one of the releases https://github.com/angular/angular-cli/releases , there is some information here https://alligator.io/angular/angular-6/ about the ng update command

Bootstrap LayoutO https://getbootstrap.com/ works with one https://getbootstrap.com/docs/4.1/layout/grid/ composed of several lines (.row) which are then composed of columns of varying widths (e.g.: .col-lg-8) each .row has 12 units wide. Like yours .card is inside a column with 12 width (.col-lg-12) each .card will always occupy the total width of .row.As such, to stand side by side, I would have to have something like: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <div class="row"> <!-- 1 Primeiro cartão, 1° objeto --> <div class="col-lg-4"> <div class="card borda-card" *ngFor="let evento of eventos"> <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a> <div class="card-body"> <p> <b>{{ evento.titulo }}</b> </p> <p class="data-card">{{ evento.data }}</p> <p>{{ evento.descricao }}</p> <a href="#" class="btn-mais-card">Saiba mais</a> </div> </div> </div> <!-- 2 Segundo cartão, 2° objeto --> <div class="col-lg-4"> <div class="card borda-card" *ngFor="let evento of eventos"> <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a> <div class="card-body"> <p> <b>{{ evento.titulo }}</b> </p> <p class="data-card">{{ evento.data }}</p> <p>{{ evento.descricao }}</p> <a href="#" class="btn-mais-card">Saiba mais</a> </div> </div> </div> <!-- 3 Terceiro cartão, 3° objeto --> <div class="col-lg-4"> <div class="card borda-card" *ngFor="let evento of eventos"> <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a> <div class="card-body"> <p> <b>{{ evento.titulo }}</b> </p> <p class="data-card">{{ evento.data }}</p> <p>{{ evento.descricao }}</p> <a href="#" class="btn-mais-card">Saiba mais</a> </div> </div> </div> </div>Potential layout problemGreat! Now if we open on a large screen, they'll be side by side! But what about tablets or phones? There'll be one by line. This has to do with the selector .col-lg-n in which it will occupy n width units on screens of the Large type (>= 992px width) - https://getbootstrap.com/docs/4.1/layout/grid/#grid-options .An example in which would always show 3 items per line: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> &lt;div class="row"&gt; &lt;!-- 1 Primeiro cartão, 1° objeto --&gt; &lt;div class="col-xs-4"&gt; &lt;div class="card borda-card" *ngFor="let evento of eventos"&gt; &lt;a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"&gt;&lt;/a&gt; &lt;div class="card-body"&gt; &lt;p&gt; &lt;b&gt;{{ evento.titulo }}&lt;/b&gt; &lt;/p&gt; &lt;p class="data-card"&gt;{{ evento.data }}&lt;/p&gt; &lt;p&gt;{{ evento.descricao }}&lt;/p&gt; &lt;a href="#" class="btn-mais-card"&gt;Saiba mais&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- 2 Segundo cartão, 2° objeto --&gt; &lt;div class="col-xs-4"&gt; &lt;div class="card borda-card" *ngFor="let evento of eventos"&gt; &lt;a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"&gt;&lt;/a&gt; &lt;div class="card-body"&gt; &lt;p&gt; &lt;b&gt;{{ evento.titulo }}&lt;/b&gt; &lt;/p&gt; &lt;p class="data-card"&gt;{{ evento.data }}&lt;/p&gt; &lt;p&gt;{{ evento.descricao }}&lt;/p&gt; &lt;a href="#" class="btn-mais-card"&gt;Saiba mais&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- 3 Terceiro cartão, 3° objeto --&gt; &lt;div class="col-xs-4"&gt; &lt;div class="card borda-card" *ngFor="let evento of eventos"&gt; &lt;a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"&gt;&lt;/a&gt; &lt;div class="card-body"&gt; &lt;p&gt; &lt;b&gt;{{ evento.titulo }}&lt;/b&gt; &lt;/p&gt; &lt;p class="data-card"&gt;{{ evento.data }}&lt;/p&gt; &lt;p&gt;{{ evento.descricao }}&lt;/p&gt; &lt;a href="#" class="btn-mais-card"&gt;Saiba mais&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code></pre></div></div></p><blockquote><p><strong>Note</strong>: even though it is <code>.row</code>, if the sum of the elements does not give the 12, Bootstrap continues to put the elements down.Solution with AngularGiven this, the simplest will be to do the ngFor inside your .row with the width of the card you want and let Bootstrap handle the rest:<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <div class="row"> <div class="card borda-card" *ngFor="let evento of eventos"> <div class="col-xs-4"> <!-- 1 Primeiro cartão, 1° objeto --> <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a> <div class="card-body"> <p> <b>{{ evento.titulo }}</b> </p> <p class="data-card">{{ evento.data }}</p> <p>{{ evento.descricao }}</p> <a href="#" class="btn-mais-card">Saiba mais</a> </div> </div> </div> </div>Pay attention that vertical spacing may not be okay, so in your .borda-card would add a margin to make sure they would look good without changing .row.

You need to add the Bootstrap in your project:npm install bootstrap@4 --save then edit the file .angular-cli. json:"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], Source: https://stackoverflow.com/questions/49729226/

So I always rode as administrator, I got to uninstall and install another version of the latest node, just didn't try to clear the cache

Try deleting the node_modules folder. Then delete the package-lock file. json after this check the typescript version on your machine, not the design, and leave with the same suggested version in the package file. json. After that surrounds npm install

Below is an image of how the folder structure was made for translation. As described in the imports of the issue, I use Globalization to get the preferred language of the device and in another file I use the TranslateServiceimport { TranslateService } from "@ngx-translate/core"; const lang = TranslateService.getBrowserCultureLang() The function getBrowserCultureLang give me the preference of the browser... Both give me the extension with the culture:lang = 'en-BR'orlang = 'en-US'What was going on is that I was going through lang in function TranslateService.setDefaultLang(lang); the way he was delivered to me.It is necessary pass lang with all content in tiny.ex: TranslateService.setDefaultLang(lang.toLowerCase())lang = 'en-br'orlang = 'en-us'

Angular defines two tools that solve this problem. https://angular.io/guide/router#preventing-unauthorized-access Use a route guard (guards route) to prevent users from browsing parts of the application that require authorization. https://angular.io/guide/router#preventing-unauthorized-access Lazy load optimizes the acquisition of resources from the application allowing you to download on demand what the user is requesting.The mixing of these two tools allows that on the one hand the routes for which the user does not have permission and on the other, that does not download what is not going to occupy.In short. It is more efficient for maintenance to have only one application that allows you to manage lazy load and safety.It should be noted that maintenance becomes more difficult in multiple projects.

Check your file .bash_profile (if any)nano ~/.bash_profile Check if there is a PATH export containing any invalid route. The separation between routes on MacOS is from :No. : like in windows.You can also check the global route file (/etc/paths) to check if there is any invalid route.

1.npm cache clear - - force(test without the - force first). 2.ng new nameProject

After hours of research and thanks to the beautiful https://nhn.github.io/tui.image-editor/latest/ImageEditor From ToastUI I could solve itIt was easier than I thought, I only asked for the information in ngAfterViewInit, bonese, after the component was loaded, after that, I did the url request I wanted to place and didthis.editorComponent.editorInstance.loadImageFromURL(image.img, res.data.line + res.data.code); this.editorComponent.editorInstance.ui.activeMenuEvent();

I found the error in another answer of the page, basically what happens is that as it put the same name for each input, about writing the new one with the previous oneThat way you should use the index concatenated with the name<div *ngFor="let k of Key; let i = index" class="form-group input-group"> <div class="input-group-append"> <div class="input-group-text"> {{k.line + k.code}} </div> </div> <input type="text" class="form-control" name="desc{{i}}" [(ngModel)]="k.desc" autocomplete="off" spellcheck="false" autocorrect="off" required /> <div class="input-group-prepend"> <div class="input-group-text"> <div class="pretty p-icon p-toggle"> <input type="checkbox" name="config{{i}}" [(ngModel)]="k.config" /> <div class="state p-success-o p-on"> <i class="fas fa-times"></i> </div> <div class="state p-info-o p-off"> <i class="fas fa-check"></i> </div> </div> </div> </div> </div>

You may only need to make an adjustment as shown in this example:me@Laptop7:~ $ npm --version6.4.1me@Laptop7:~sudo npm uninstall -g angular-clime@Laptop7:~sudo npm install -g @angular/cliNow just click ng version and that must solve your problem.

You're missing the interface. ngOnInit() { this._peticionesservice.getConfig().subscribe( (result: any) => { this.user= result.data; console.log(result); }, error => { console.log(error); } ); } Or better add, declare the interface. I leave a reference to a similar question https://es.stackoverflow.com/questions/303847/como-leer-una-variable-especifica-de-un-json-en-angular/303849#303849

Well, after researching and looking at code like a madman I realized that by importing any material angular component from @angular/material directly this made a mistake ".../@angular/material" is not a module but by importing them from their respective folders like for example "@angular/material/button" No longer jumps that mistake. I had to change all the imports app.module.ts and also all my components where I used them.I don't know if there's a better solution, but this is what has served me for the moment. If someone knows another method, please post it.Thank you.

You don't have access permissions in the folder /usr/lib/node_modulesYou should check the permissions in that folder and assign the right ones.As a second option, which should work (but does not solve the root problem of permissions) would be to execute the command preceded by sudo to do so with administrator permissions:sudo npm install ...He'll ask you about your administrator password.

I could solve it by running the following command npm install --cache /tmp/empty-cacheAlso, if you work in a proxy place don't forget to set up: npm config set proxy http://proxy.empresa.com:80 npm config set https-proxy http://proxy.empresa.com:80