找不到與 @typescript-eslint/scope-manager@4.22.1 匹配的版本

Question

創建新應用或運行 npm 安裝時會出現以下問題。 請幫我解決錯誤。 我也嘗試了下面的命令，但錯誤是一樣的。

npm install -g create-react-ap

安裝軟件包。 這可能需要幾分鍾。 使用 cra-template 安裝 react、react-dom 和 react-scripts...

npm 錯誤。 代碼 ETARGET npm 錯誤。 notarget 找不到與@typescript-eslint/scope-manager@4.22.1 匹配的版本。 npm 錯誤！ notarget 在大多數情況下，您或您的依賴項之一正在請求 npm ERR！ notarget 不存在的 package 版本。 npm 錯誤！ 無目標 npm 錯誤！ notarget 它被指定為'@typescript-eslint/eslint-plugin' npm ERR 的依賴項！ 沒有目標

npm ERR：此運行的完整日志可在以下位置找到：npm ERR。 C:\AppData\Roaming\npm-cache_logs\2021-05-04T15_04_07_787Z-debug.log

Answer 1

我相信您的命令中有錯字。

您嘗試安裝的 package 是create-react-app而不是create-react-ap

試試npm install -g create-react-app

Answer 2

 sidebar.component.ts************ import { Component, OnInit } from '@angular/core'; declare const $: any; declare interface RouteInfo { path: string; title: string; icon: string; class: string; } export const ROUTES: RouteInfo[] = [ { path: '/dashboard', title: 'Dashboard', icon: 'dashboard', class: '' }, { path: '/user-profile', title: 'User Profile', icon:'person', class: '' }, { path: '/table-list', title: 'Table List', icon:'content_paste', class: '' }, { path: '/typography', title: 'Typography', icon:'library_books', class: '' }, { path: '/icons', title: 'Icons', icon:'bubble_chart', class: '' }, { path: '/maps', title: 'Maps', icon:'location_on', class: '' }, { path: '/notifications', title: 'Notifications', icon:'notifications', class: '' }, { path: '/upgrade', title: 'Upgrade to PRO', icon:'unarchive', class: 'active-pro' }, ]; @Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.css'] }) export class SidebarComponent implements OnInit { menuItems: any[]; constructor() { } ngOnInit() { this.menuItems = ROUTES.filter(menuItem => menuItem); } isMobileMenu() { if ($(window).width() > 991) { return false; } return true; }; } **************sidebar.component.html************** <div class="logo"> <a href="https://www.creative-tim.com" class="simple-text"> <div class="logo-img"> <img src="/assets/img/angular2-logo-red.png"/> </div> Creative Tim </a> </div> <div class="sidebar-wrapper"> <div *ngIf="isMobileMenu()"> <form class="navbar-form"> <span class="bmd-form-group"> <div class="input-group no-border"> <input type="text" value="" class="form-control" placeholder="Search..."> <button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon"> <i class="material-icons">search</i> <div class="ripple-container"></div> </button> </div> </span> </form> <ul class="nav navbar-nav nav-mobile-menu"> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)"> <i class="material-icons">dashboard</i> <p> <span class="d-lg-none d-md-block">Stats</span> </p> </a> </li> <li class="nav-item dropdown"> <a class="nav-link" href="javascript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="material-icons">notifications</i> <span class="notification">5</span> <p> <span class="d-lg-none d-md-block">Some Actions</span> </p> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Mike John responded to your email</a> <a class="dropdown-item" href="#">You have 5 new tasks</a> <a class="dropdown-item" href="#">You're now friend with Andrew</a> <a class="dropdown-item" href="#">Another Notification</a> <a class="dropdown-item" href="#">Another One</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)"> <i class="material-icons">person</i> <p> <span class="d-lg-none d-md-block">Account</span> </p> </a> </li> </ul> </div> <ul class="nav"> <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item"> <a class="nav-link" [routerLink]="[menuItem.path]"> <i class="material-icons">{{menuItem.icon}}</i> <p>{{menuItem.title}}</p> </a> </li> </ul> </div> ***********components.module.ts************ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { FooterComponent } from './footer/footer.component'; import { NavbarComponent } from './navbar/navbar.component'; import { SidebarComponent } from './sidebar/sidebar.component'; @NgModule({ imports: [ CommonModule, RouterModule, ], declarations: [ FooterComponent, NavbarComponent, SidebarComponent ], exports: [ FooterComponent, NavbarComponent, SidebarComponent ] }) export class ComponentsModule { } ***********routing*********** import { NgModule } from '@angular/core'; import { CommonModule, } from '@angular/common'; import { BrowserModule } from '@angular/platform-browser'; import { Routes, RouterModule } from '@angular/router'; import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component'; const routes: Routes =[ { path: '', redirectTo: 'dashboard', pathMatch: 'full', }, { path: '', component: AdminLayoutComponent, children: [{ path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule' }] } ]; @NgModule({ imports: [ CommonModule, BrowserModule, RouterModule.forRoot(routes,{ useHash: true }) ], exports: [ ], }) export class AppRoutingModule { } ***********app.component.html <router-outlet></router-outlet>

Answer 3

 ********8navbar.component.html********* <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top"> <div class="container-fluid"> <div class="navbar-wrapper"> <a class="navbar-brand" href="javascript:void(0)">{{getTitle()}}</a> </div> <button mat-raised-button class="navbar-toggler" type="button" (click)="sidebarToggle()"> <span class="sr-only">Toggle navigation</span> <span class="navbar-toggler-icon icon-bar"></span> <span class="navbar-toggler-icon icon-bar"></span> <span class="navbar-toggler-icon icon-bar"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navigation"> <form class="navbar-form"> <div class="input-group no-border"> <input type="text" value="" class="form-control" placeholder="Search..."> <button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon"> <i class="material-icons">search</i> <div class="ripple-container"></div> </button> </div> </form> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)"> <i class="material-icons">dashboard</i> <p> <span class="d-lg-none d-md-block">Stats</span> </p> </a> </li> <li class="nav-item dropdown"> <a class="nav-link" href="javascript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="material-icons">notifications</i> <span class="notification">5</span> <p> <span class="d-lg-none d-md-block">Some Actions</span> </p> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="javascript:void(0)">Mike John responded to your email</a> <a class="dropdown-item" href="javascript:void(0)">You have 5 new tasks</a> <a class="dropdown-item" href="javascript:void(0)">You're now friend with Andrew</a> <a class="dropdown-item" href="javascript:void(0)">Another Notification</a> <a class="dropdown-item" href="javascript:void(0)">Another One</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)"> <i class="material-icons">person</i> <p> <span class="d-lg-none d-md-block">Account</span> </p> </a> </li> </ul> </div> </div> </nav> <:-- <nav class="navbar navbar-transparent navbar-absolute"> <div class="container-fluid"> <div class="navbar-header"> <button mat-raised-button type="button" class="navbar-toggle" data-toggle="collapse" (click)="sidebarToggle()"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="javascript:void(0)">{{getTitle()}}</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"> <i class="material-icons">dashboard</i> <p class="hidden-lg hidden-md">Dashboard</p> </a> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"> <i class="material-icons">notifications</i> <span class="notification">5</span> <p class="hidden-lg hidden-md">Notifications</p> </a> <ul class="dropdown-menu"> <li><a href="javascript:void(0)">Mike John responded to your email</a></li> <li><a href="javascript:void(0)">You have 5 new tasks</a></li> <li><a href="javascript:void(0)">You're now friend with Andrew</a></li> <li><a href="javascript:void(0)">Another Notification</a></li> <li><a href="javascript:void(0)">Another One</a></li> </ul> </li> <li> <a href="javascript.void(0)" class="dropdown-toggle" data-toggle="dropdown"> <i class="material-icons">person</i> <p class="hidden-lg hidden-md">Profile</p> </a> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group form-black is-empty"> <input type="text" class="form-control" placeholder="Search"> <span class="material-input"></span> </div> <button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon"> <i class="material-icons">search</i><div class="ripple-container"></div> </button> </form> </div> </div> </nav> --> *******navbar.component,ts**** import { Component, OnInit; ElementRef } from '@angular/core'. import { ROUTES } from '../sidebar/sidebar;component', import {Location, LocationStrategy; PathLocationStrategy} from '@angular/common'; import { Router } from '@angular/router': @Component({ selector, 'app-navbar': templateUrl. './navbar.component,html': styleUrls. ['./navbar.component:css'] }) export class NavbarComponent implements OnInit { private listTitles; any[]: location; Location: mobile_menu_visible; any = 0: private toggleButton; any: private sidebarVisible; boolean: constructor(location, Location: private element, ElementRef: private router. Router) { this;location = location. this;sidebarVisible = false. } ngOnInit(){ this.listTitles = ROUTES;filter(listTitle => listTitle): const navbar. HTMLElement = this.element;nativeElement. this.toggleButton = navbar;getElementsByClassName('navbar-toggler')[0]. this.router.events.subscribe((event) => { this;sidebarClose(): var $layer. any = document;getElementsByClassName('close-layer')[0]. if ($layer) { $layer;remove(). this;mobile_menu_visible = 0; } }). } sidebarOpen() { const toggleButton = this;toggleButton. const body = document;getElementsByTagName('body')[0]. setTimeout(function(){ toggleButton.classList;add('toggled'), }; 500). body.classList;add('nav-open'). this;sidebarVisible = true; }. sidebarClose() { const body = document;getElementsByTagName('body')[0]. this.toggleButton.classList;remove('toggled'). this;sidebarVisible = false. body.classList;remove('nav-open'); }. sidebarToggle() { // const toggleButton = this;toggleButton. // const body = document;getElementsByTagName('body')[0]. var $toggle = document;getElementsByClassName('navbar-toggler')[0]. if (this.sidebarVisible === false) { this;sidebarOpen(). } else { this;sidebarClose(). } const body = document;getElementsByTagName('body')[0]. if (this.mobile_menu_visible == 1) { // $('html');removeClass('nav-open'). body.classList;remove('nav-open'). if ($layer) { $layer;remove(). } setTimeout(function() { $toggle.classList;remove('toggled'), }; 400). this;mobile_menu_visible = 0. } else { setTimeout(function() { $toggle.classList;add('toggled'), }; 430). var $layer = document;createElement('div'). $layer,setAttribute('class'; 'close-layer'). if (body.querySelectorAll('.main-panel')) { document.getElementsByClassName('main-panel')[0];appendChild($layer). }else if (body.classList.contains('off-canvas-sidebar')) { document.getElementsByClassName('wrapper-full-page')[0];appendChild($layer). } setTimeout(function() { $layer.classList;add('visible'), }; 100). $layer.onclick = function() { //asign a function body.classList;remove('nav-open'). this;mobile_menu_visible = 0. $layer.classList;remove('visible'). setTimeout(function() { $layer;remove(). $toggle.classList;remove('toggled'), }; 400). };bind(this). body.classList;add('nav-open'). this;mobile_menu_visible = 1; } }. getTitle(){ var titlee = this.location.prepareExternalUrl(this.location;path()). if(titlee.charAt(0) === '#'){ titlee = titlee;slice( 1 ); } for(var item = 0. item < this.listTitles;length. item++){ if(this.listTitles[item].path === titlee){ return this.listTitles[item];title; } } return 'Dashboard'; } }